<template>
	
	<div id="denglu" v-show="showRegState">
		
			<div id="dengluheader">
				<p class="hp" @click="change"><</p>
				<p class="dp">注册</p>
			</div>
			
			<div class="textzhanghu">
				<input type="text" v-model="rname" id="denglut" placeholder="手机号/邮箱"/>
				<span v-show="kregist">已经被注册</span>
				<span v-show="!kregist">可以注册</span>
			</div>
			
			<div class="textmima">
				<input type="password" v-model="rpwd" id="mima" placeholder="登录密码" />
			</div>
			
			<div id="dianji">
				<input type="button" name="but" id="but" value="注册" @click="regist(rname,rpwd)" />
			</div>
			
	</div>
	
</template>

<script>
	
	export default{
		data(){
			return{
				rname:"",
				rpwd:"",
				kregist:false
			}
		},
		computed: {
			showRegState(){
				// 获取仓库当中的状态值
				//this.$store.state.bigState = true;
				return this.$store.state.regState;
			}
		},
		methods:{
			change(){
				this.$store.commit('changeRegState');
			},
			regist(name,pwd){
				console.log(name,pwd)
				this.$http({
					method: 'get',
					url: 'http://localhost:8080/regist',
					params: {
						name: name,
						pwd: pwd
					}
				}).then(function(req){
					var result = req.body.status;
					if(result == 2){
						this.kregist = true;
					}
					console.log(this.kregist);
				})
			}
		},
		mounted(){
			var timer;
			this.$watch('rname',function(a){
				this.kregist = false;
				clearTimeout(timer);
				timer = setTimeout(()=>{
					
					this.regist(name);
//					console.log(rname);
				},500)
//				console.log(a);
			})
		}
	}
	
</script>

<style scoped>
	#denglu{
		position: absolute;
		z-index: 100;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		background: white;
	}
	
	#dengluheader {
		width: 100%;
		height: 1.8518rem;
		position: relative;
		top: 0;
	}
	
	.hp {
		font-size: 0.6944rem;
		position: absolute;
		left: 0.6666rem;
		top: 0.27rem;
	}
	.dp {
		font-size: 0.4722rem;
		position: absolute;
		left: 4.4814rem;
		top: 0.5185rem;
		font-family: "楷体";
	}
	.textzhanghu{
		width: 100%;
		height: 1.4444rem;
		position: relative;
		top: 0;
		left: 0;
		border-top: solid 1px #eaeae0;
		
	}
	#denglut{
		width: 8.8888rem;
		height:0.6666rem;
		position: absolute;
		left: 0.5555rem;
		top: 0.3703rem;
		font-size: 0.4814rem;
		font-family: "楷体";
		border: none;
	}
	.textmima{
		width: 100%;
		height: 1.4444rem;
		position: relative;
		top: 0;
		left: 0;
			border-top: solid 1px #eaeae0;
	}
	#mima{
		width: 8.8888rem;
		height:0.6666rem;
		position: absolute;
		left: 0.5555rem;
		top: 0.3703rem;
		font-size: 0.4814rem;
		font-family: "楷体";
		border: none;
		
	}
	#dianji{
		width: 100%;
		height: 3.7777rem;
		position: relative;
		top: 0;
		left: 0;
		border-top: solid 1px #eaeae0;
	}
	#dianji input{
		width: 8.9351rem;
		height: 1.2962rem;
		position: absolute;
		left:0.5555rem ;
		top: 0.6018rem;
		font-size: 0.5092rem;
		background: #c6c6bd;
		color: white;
		border: none;
	}
	.dianjidenglupdp{
		font-size: 0.3981rem;
		position: absolute;
		left: 0.5555rem;
		top: 2.6851rem;
	}
	.dianjidenglupdp2{
		font-size: 0.3981rem;
		position: absolute;
		right: 0.7407rem;
		top: 2.6851rem;
	}
	.weibu{
		width: 100%;
		height: 7.5555rem;
		position: relative;
		top: 0;
		left: 0;
		border-top: solid 1px #eaeae0;
	}
	.otherdenglu{
		position: absolute;
		left: 3.0092rem;
		top: 4.2592rem;
		color: #95958f;
		font-family: "楷体";
		font-size: 0.3425rem;
		
	}
	.weibu .tuweixin{
		width:1.6296rem ;
		height: 1.6018rem;
		position: absolute;
		left:1.0462rem ;
		top: 5.1574rem;
	}
	.weibu .tuweibo{
		width:1.6296rem ;
		height: 1.6018rem;
		position: absolute;
		left:3.1759rem;
		top: 5.1574rem;
	}
	.weibu .tuqq{
		width:1.6296rem ;
		height: 1.6018rem;
		position: absolute;
		left:5.2685rem ;
		top: 5.1574rem;
	}
	.weibu .tudouban{
		width:1.6296rem ;
		height: 1.6018rem;
		position: absolute;
		left:7.3518rem;
		top: 5.1574rem;
	}
</style>